import React, {Component} from 'react';
import {AppWrapper} from "./style";
import classNames from "classnames";

class CssInJs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hStyles: [
                {
                    backgroundColor: 'black',
                    color: 'blue',
                },
                {
                    backgroundColor: 'orange',
                    color: 'white',
                },
                {
                    backgroundColor: 'red',
                    color: 'yellow',
                },
            ],
            hStyleIndex: 0,
            hStyleSize: 20
        }
    }

    changeHst = function () {
        this.setState({
            hStyleIndex: (this.state.hStyleIndex + 1) % this.state.hStyles.length,
            hStyleSize: this.state.hStyleSize + 2
        })
    };

    render() {
        const {hStyles, hStyleIndex} = this.state;
        // AppWrapper为自定义的样式组件
        const hs = hStyles[hStyleIndex]
        hs.fontSize = this.state.hStyleSize;
        return (
            <AppWrapper hStyle={hs} cc={hs.backgroundColor}>
                <div className='title'>Title</div>
                <div className='content'>Content
                    <span onMouseLeave={e => this.changeHst()}> Span 标签</span>
                </div>
                <div className='foot'>Foot</div>
                <div className={classNames('abc', {'def': true, 'abo': false})}>
                    Classnames
                </div>
            </AppWrapper>
        );
    }
}

export default CssInJs;